<!DOCTYPE html>
<html>
<head>
<title>Services</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->

<link href='http://fonts.googleapis.com/css?family=Viga' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->

</head>
<body>
<!-- header -->
<div class="banner page_head w3l">
	<div class="head_top">
		<div class="container">
			<div class="banner-right">
				<ul>
					<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+123 2222 222</li>
					<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:example@mail.com">mail@example.com</a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //header -->
<!-- navigation -->
<div class="header w3ls">
	<div class="container">
		<nav class="navbar navbar-default">
							<!-- Brand and toggle get grouped for better mobile display -->
							<div class="navbar-header logo">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<h1>
									<a class="navbar-brand link link--yaku" href="index.html">Real Site</a>
								</h1>
								
							</div>
							<!-- Collect the nav links, forms, and other content for toggling -->
							<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
								<nav class="cl-effect-1">
									<ul class="nav navbar-nav ">
										<li><a class="hvr-overline-from-center" href="index.html">Home</a></li>
										<li><a class="hvr-overline-from-center" href="about.html">About</a></li>
										<li><a class="hvr-overline-from-center" href="gallery.html">Properties</a></li>
										<li><a class="hvr-overline-from-center active" href="services.html">Services</a></li>
										<li><a class="hvr-overline-from-center" href="codes.html">Short Codes</a></li>
										<li><a class="hvr-overline-from-center" href="contact.html">Contact</a></li>
									</ul>
								</nav>
							</div><!-- /navbar-collapse -->
		</nav>
	</div>
</div>
<!-- //navigation -->
<!-- contact -->
<div class="contact wthree all_pad">
	<div class="container">
		<h2 class="title">Services<span></span></h2>
			<div class="ser-page">
				<div class="col-md-4 ser-first-grid text-center wow fadeInRight animated" data-wow-delay=".5s">
							<img src="images/icon1.png" alt=" "/>
							<h4>Temporibus Autem</h4>
							<p>These cases are perfectly simple and easy to distinguish. 
								In a free hour, when.</p>
				</div>
				<div class="col-md-4 ser-first-grid text-center wow fadeInUp animated" data-wow-delay=".5s">
							<img src="images/icon2.png" alt=" "/>
							<h4>Temporibus Autem</h4>
							<p>These cases are perfectly simple and easy to distinguish. 
								In a free hour, when.</p>
				</div>
				<div class="col-md-4 ser-first-grid text-center wow fadeInDown animated" data-wow-delay=".5s">
							<img src="images/icon3.png" alt=" "/>
							<h4>Temporibus Autem</h4>
							<p>These cases are perfectly simple and easy to distinguish. 
								In a free hour, when.</p>
				</div>
				<div class="clearfix"></div>
			</div>
	</div>
</div>
<!-- exp -->
<div class="experience agile all_pad">
	<div class="container">
		<h3 class="title">Popularised Services</h3>
			<div class="exp-page">
				<div class="col-md-4 exp-grids wow fadeInRight animated" data-wow-delay=".5s">
					<div class="exp-gd-info one">
						<div class="exp-info-text hvr-rectangle-out">
							<h4>Lacinia pulvinar nunc rutrum</h4>
							<p>Donec nulla justo, pharetra nulla, lacinia pulvinar nunc rutrum nisi vel nib  impedit quo minus id quod maxime placeat facere
					possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 exp-grids wow fadeInUp animated" data-wow-delay=".5s">
					<div class="exp-info-img">
						<img class="img-responsive" src="images/g1.jpg" alt=" "/>
					</div>
					<div class="exp-info-img exp-top">
						<img class="img-responsive" src="images/g2.jpg" alt=" "/>
					</div>
				</div>
				<div class="col-md-4 exp-grids exp_three wow fadeInLeft animated" data-wow-delay=".5s">
					<div class="exp-gd-info three">
						<div class="exp-info-text hvr-rectangle-out">
							<h4>Lacinia pulvinar nunc rutrum</h4>
							<p>Donec nulla justo, pharetra nulla, lacinia pulvinar nunc rutrum nisi vel nib  impedit quo minus id quod maxime placeat facere
					possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
	</div>
</div>
<!-- footer -->
<div class="newsletter agileits">
	<div class="container">
		<h3 class="title">Subscribe To Our Newsletter!<span></span></h3>
		<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
		<div class="sub">
			<form action="#" method="post">
				<input type="text" name="Name" placeholder="Name" required="">
				<input type="email" name="Email" placeholder="Email" required="">
				<input type="submit" value="Subscribe" >
			</form>
		</div>
	</div>
</div>
<!-- map -->
<!-- map -->
<div class="map">
	<iframe src="" style="border:0"></iframe>
</div>
<!-- //map -->
<div class="footer w3agile">
	<div class="container">
		<!-- <div class="foo-arr text-center"><img src="images/arrows.png" alt=" "/></div> -->
		<div class="col-md-4 footer-left">
			<i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i><p>123K Avenue, 5th Street, <span>New York City</span></p>
		</div>
		<div class="col-md-4 footer-left">
			<i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><p><a href="mailto:example@mail.com">mail@example1.com</a><span><a href="mailto:example@mail.com">mail@example2.com</a></span></p>
		</div>
		<div class="col-md-4 footer-left">
			<i class="glyphicon glyphicon-earphone" aria-hidden="true"></i><p>+123 2222 222<span>+123 456 7890</span></p>
		</div>
		<div class="clearfix"></div>
		<div class="copyrights w3">
			<div class="copy-left">
				<p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
			<div class="copy-right agileinfo">
				<ul class="fb_icons">
					<li class="hvr-rectangle-out"><a class="fb" href="#"></a></li>
					<li class="hvr-rectangle-out"><a class="twit" href="#"></a></li>
					<li class="hvr-rectangle-out"><a class="goog" href="#"></a></li>
					<li class="hvr-rectangle-out"><a class="pin" href="#"></a></li>
					<li class="hvr-rectangle-out"><a class="drib" href="#"></a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //footer -->
<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
</body>
</html>